<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>画板</title>
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_ot2a9rn0wgffxbt9.css"> -->
  <link rel="stylesheet" href="/assets/css/canvas/mopan.css">
</head>
<body>

  <canvas id="canvas"></canvas>

  <section class="tool-bar" id="tool">
    <div class="tool_Item">
      <img src="https://xcx-1256535092.cos.ap-shanghai.myqcloud.com/molihuaban/item/zyms.png" id="pencil" class="moshi actived">
      自由模式
    </div>
    <div class="tool_Item">
      <img src="https://xcx-1256535092.cos.ap-shanghai.myqcloud.com/molihuaban/item/zydc.png" id="zuoyou" class="moshi ">
      左右对称
    </div>
    <div class="tool_Item">
      <img src="https://xcx-1256535092.cos.ap-shanghai.myqcloud.com/molihuaban/item/dcxz.png" id="zhongxin" class="moshi ">
      中心对称
    </div>
    <div class="tool_Item">
      <img src="https://xcx-1256535092.cos.ap-shanghai.myqcloud.com/molihuaban/item/zxxz.png" id="xuanzhuan" class="moshi ">
      旋转对称
    </div>
    <!-- <div class="tool_Item">
      <img src="http://pic.qiantucdn.com/58pic/28/24/53/71q58PICi5D_1024.jpg!qtwebp324" id="pingpu" class="moshi ">
      平铺模式
    </div> -->
    <!-- <i class="iconfont icon-pencil" id="pencil"></i> -->
    <!-- <i class="iconfont icon-line" id="line"></i> -->
    <!-- <i class="iconfont icon-rect" id="rect"></i> -->
    <!-- <i class="iconfont icon-xiangpi" id="eraser"></i> -->
    <!-- <i class="iconfont icon-round" id="round"></i> -->
  </section>

  <!-- 调色板 -->
  <section class="palette palette-show" id="Palette">
    <i class="iconfont icon-palette" id="toPalette" hidden></i>
    <div class="bar">
      <div class="scroll">
        <i class="item black"></i>
        <i class="item red"></i>
        <i class="item pink"></i>
        <i class="item purple"></i>
        <i class="item deep-purple"></i>
        <i class="item indigo"></i>
        <i class="item blue"></i>
        <i class="item light-blue"></i>
        <i class="item cyan"></i>
        <i class="item green"></i>
        <i class="item light-green"></i>
        <i class="item lime"></i>
        <i class="item yellow"></i>
        <i class="item amber"></i>
        <i class="item orange"></i>
        <i class="item deep-orange"></i>
        <i class="item brown"></i>
        <i class="item grey"></i>
        <i class="item blue-grey"></i>
      </div>
    </div>
  </section>

  <!-- 粗细 -->
  <section class="width width-show" id="width">
    <i class="iconfont icon-width" id="toWidth" hidden></i>
    <span class="widthWapper"><span id="value1"></span></span>
    <form class="bar">
      <input type="range" max="20" min="1" step="1" id="lineWidth" class="range" value="10" oninput="changeSpeed()">
    </form>
  </section>

  <!-- 撤回、橡皮、清空 -->
  <span id="tool2">
    <i class="iconfont icon-chexiao" id="cancel"></i>
    <i class="iconfont icon-xiangpi" id="eraser"></i>
    <i class="iconfont icon-ziyuan clear" id="clr"></i>
  </span>

  <div class="save" id="saveImg">保存</div>


  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  <script src="/assets/js/canvas/mopan.js"></script>
</body>
</html>
